<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @add="addFn" :list="list"></TodoHeader>
    <TodoMain :list="showList" @del="delet"></TodoMain>
    <TodoFooter @tog="todo" @ywc="clear" :leng="showList.length"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
 data(){
  return {
     list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 102, name: "打豆豆", isDone: true },
      ],
      sel:'all'
  }
 },
  methods:{
    // 增加数据
    addFn(task){
     this.list.push({
      id:this.list.length? this.list.at(-1).id+1:100,
      name:task,
      isDone:false
     })
    },
    // 删除数据
    delet(id){
// console.log(id)
this.list=this.list.filter(item=>item.id !==id)
    },
    todo(type){
    this.sel = type
    },
    // 清楚已完成
    clear(){
      this.list=this.list.filter(item=>!item.isDone)
    }
  },
  // 定义底部计算属性
  computed:{
    showList(){
     if(this.sel==='all'){
       return this.list
     }else if(this.sel==='yes'){
      return this.list.filter(item=>item.isDone)
     }else {
      return this.list.filter(item=>!item.isDone)
     }
    }
  }
}
</script>